<template>
    <div class="shop-container">

      <ul class="shop-list" v-if="homeShopList.length>0">
        <li class="shop-list-item" v-for="(shoplist,index) in homeShopList" :key="index">
          <img :src="shoplist.image_url" width="100%"/>
          <h4 class="list-item-title">{{shoplist.goods_name}}</h4>
          <div class="list-item-bottom">
            <span class="item-price">{{shoplist.normal_price/100}}</span>
            <span class="item-count">{{shoplist.sales_tip}}</span>
            <span class="item-user">
              <img :src="user.avatar" v-for="(user,index) in shoplist.bubble" :key="index"/>
            </span>
            <span class="item-buy">
              <button>去拼单 ></button>
            </span>
          </div>
        </li>
      </ul>

    </div>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
      name: "hot-shoplist",
      mounted(){
        //请求首页商品列表数据
        this.$store.dispatch('reqHomeShopList')
      },
      computed:{
        ...mapState(['homeShopList'])
      }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
.shop-container
  margin-bottom 50px
  background-color #f5f5f5
  .shop-list
        .shop-list-item
         margin-bottom 10px
         background-color #fff
         display flex
         flex-direction column
        .list-item-title
            line-height 22px
            margin-left 3%
            height 44px
            overflow hidden
        .list-item-bottom
          margin 10px 0
          display flex
          flex-direction row
          justify-content space-around
          align-items center
        .item-price
          text-align center
          font-size 18px
          font-weight 600
          color red
          flex 1
        .item-count
          flex 2
          font-size 12px
          color #ccc
        .item-user
          display flex
          justify-content center
          align-items center
          flex 1
        .item-user img
          width 40px
          border-radius 50%
        .item-user img:nth-child(2)
          margin-left -6px
        .item-buy
          flex 2
        button
          width 80%
          border none
          height 34px
          color #fff
          display flex
          justify-content center
          align-items center
          margin-left 10px
          background-color red
          border-radius 8px
          font-size 16px
</style>
